<template>
  <div class="label-view">
    <PdfView :view="view" />
  </div>
  <div class="label-form">
    <el-form :model="form" label-position="top">
      <el-tabs type="card">
        <el-tab-pane :label="plugin.lang('label.tabs.0')">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.page_width')">
                <el-input v-model="form.page_width" type="number">
                  <template #append>mm</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.page_height')">
                <el-input v-model="form.page_height" type="number">
                  <template #append>mm</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.page_margin')">
                <el-input v-model="form.page_margin" type="number">
                  <template #append>mm</template>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.page_grid')">
                <el-switch v-model="form.page_grid" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.label_width')">
                <el-input v-model="form.label_width" type="number" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.label_height')">
                <el-input v-model="form.label_height" type="number" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.label_start')">
                <el-input v-model="form.label_start" type="number" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.label_count')">
                <el-input v-model="form.label_count" type="number" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane :label="plugin.lang('label.tabs.1')">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item :label="plugin.lang('label.name')">
                <el-input v-model="form.name" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="plugin.lang('label.weight')">
                <el-switch v-model="form.name_weight" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="plugin.lang('label.italic')">
                <el-switch v-model="form.name_italic" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.font_size')">
                <div style="width: 100%; padding: 0 15px">
                  <el-slider v-model="form.name_size" :max="50" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="X">
                <div style="width: 100%; padding: 0 15px">
                  <el-slider v-model="form.name_x" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Y">
                <div style="width: 100%; padding: 0 15px">
                  <el-slider v-model="form.name_y" />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane :label="plugin.lang('label.tabs.2')">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.code')">
                <el-input v-model="form.code" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.code_type')">
                <el-select v-model="form.code_type" style="width: 100%">
                  <el-option
                    v-for="(item, key, index) in plugin.langTm('label.code_type_value')"
                    :key="index"
                    :label="item"
                    :value="key">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.font_style')">
                <el-select v-model="form.code_font" style="width: 100%">
                  <el-option
                    v-for="(item, key, index) in plugin.langTm('label.code_font')"
                    :key="index"
                    :label="item"
                    :value="key">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.font_size')">
                <div style="width: 100%; padding: 0 15px">
                  <el-slider v-model="form.code_size" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.code_width')">
                <div style="width: 100%; padding: 0 15px">
                  <el-slider v-model="form.code_width" :min="1" :max="4" show-stops />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.code_height')">
                <div style="width: 100%; padding: 0 15px">
                  <el-slider v-model="form.code_height" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.code_margin')">
                <div style="width: 100%; padding: 0 15px">
                  <el-slider v-model="form.code_margin" :min="-5" :max="20" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.code_zoom')">
                <div style="width: 100%; padding: 0 15px">
                  <el-slider v-model="form.code_zoom" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="X">
                <div style="width: 100%; padding: 0 15px">
                  <el-slider v-model="form.code_x" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Y">
                <div style="width: 100%; padding: 0 15px">
                  <el-slider v-model="form.code_y" />
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane :label="plugin.lang('label.tabs.3')">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.price')">
                <el-input v-model="form.price" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="plugin.lang('label.font_size')">
                <div style="width: 100%; padding: 0 15px">
                  <el-slider v-model="form.price_size" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="X">
                <div style="width: 100%; padding: 0 15px">
                  <el-slider v-model="form.price_x" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="Y">
                <div style="width: 100%; padding: 0 15px">
                  <el-slider v-model="form.price_y" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="plugin.lang('label.weight')">
                <el-switch v-model="form.price_weight" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="plugin.lang('label.italic')">
                <el-switch v-model="form.price_italic" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>
<script>
import { nextTick, watch } from 'vue'
import app from '@/app'
import labelModel from '../../model/label'
import PdfView from '@/components/pdfview'

export default {
  components: {
    PdfView
  },
  setup() {
    // 插件
    const plugin = app.plugin.index

    // 视图
    const view = labelModel.view
    // 表单
    const form = labelModel.data

    let timer
    watch(form, () => {
      if(timer) clearTimeout(timer)
      timer = setTimeout(() => {
        labelModel.buildView()
      }, 500)
    })

    nextTick(() => labelModel.buildView())

    return {
      app: app,
      lang: app.lang,
      plugin,
      view,
      form
    }
  }
}
</script>